<template>
    <div class="page">
      <!-- <group>
           <x-input title="持卡人" v-model="fromdata.name" :max="20" placeholder="请输入持卡人姓名"></x-input>
           <x-input title="银行卡号" v-model="fromdata.bankCardNo" :max="19" placeholder="请输入银行卡号码"></x-input>
           <x-input title="身份证号" v-model="fromdata.certNo"  :max="18" placeholder="请输入证件号码"></x-input>
           <x-input title="手机号码" v-model="fromdata.cardPhone"  :max="18" placeholder="请输入银行预留手机号"></x-input>
      </group> -->
      <span class="topMsg">请绑定持卡人本人银行卡</span>
      <div class="fromMsg">
          <div class="lable">
            <span class="lableName">
              持卡人
            </span>
            <input type="text" placeholder="请输入持卡人姓名" v-model="fromdata.name">
          </div>
          <div class="lable">
            <span class="lableName">
              银行卡号
            </span>
            <input type="tel" maxlength="19" placeholder="请输入银行卡号码" v-model="fromdata.bankCardNo">
          </div>
          <div class="lable">
            <span class="lableName">
              身份证号
            </span>
            <input type="text" placeholder="请输入证件号码" maxlength="18" v-model="fromdata.certNo">
          </div>
          <div class="lable">
            <span class="lableName">
              手机号码
            </span>
            <input type="tel" placeholder="请输入银行预留手机号" maxlength="11" v-model="fromdata.cardPhone">
          </div>
          <div class="fromBox" @click="submit">
           提交
          </div>
      </div>
      
    </div>
</template>


<script>
import { XInput,Group } from 'vux';
import {tiedCard} from "../../methods/request.js" 
import { Toast  } from 'mint-ui';
export default {
  // 最顶部黑色栏
  data () {
    return {
      fromdata:{
        name:"",
        bankCardNo:"",
        certNo:"",
        cardPhone:""
      }
    }
  },
  components: {
    XInput,
    Group
  },
  created(){
      this.$store.commit('increment',"添加银行卡")
  
  },
  methods:{
      submit(){
        //提交
        if(!(/^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|17[0|1|2|3|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9]|19[0|1|2|3|5|6|7|8|9])\d{8}$/.test(this.fromdata.cardPhone))){
          Toast({
            message: '手机号码有误，请重填',
            duration: 1000
          });
          return false;
        }
        if(!(/^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/.test(this.fromdata.certNo))){
          Toast({
            message: '身份证号有误，请重填',
            duration: 1000
          });
          return false;
        }
        this.$vux.loading.show({
            text: 'Loading'
        })
        tiedCard(this.fromdata).then(
                response => {
                    if(response.rspCode == "0000"){
                      this.$vux.loading.hide() 
                      if(response.data.rspCode == "0000"){
                              Toast({ message:'已发送手机验证码，注意查收哦',position: 'middle', duration: 3000 });
                              this.$router.push({
                                  path: "/addBankEnd",
                                  query: {
                                  cardPhone: this.fromdata.cardPhone
                                  }
                              });
                        }else if(response.data.rspCode == "8001"){
                              Toast({ message:'该手机号已被绑定'});
                        }
                    }else{
                      this.$vux.loading.hide() 
                      Toast({ message:'绑定银行卡失败！'});
                    }
                  }).catch(error => {console.log(error);this.$vux.loading.hide() } );
      }
  }
};
</script>
<style lang="less" scoped>
.page{ 
    position: fixed;
    top: 46px;
    width: 100%;
    height: 100%;
    background-color:#f1f2f3;
    overflow-x:auto;
    .title{
        width: 100%;
        padding: 0 10px 0 10px;
        text-align: left;
        line-height: 30px;
        height: 30px;
    }
}
.topMsg{
  display: block;
  width: 85%;
  margin: 20px auto 0;
  text-align: left;
  color: #99989d;
  font-size: 12px;
}
.fromMsg{
  width: 85%;
  margin: 10px auto;
  background: #ffffff;
  padding: 0 15px 50px;
  border-radius: 20px;
  position: relative;
}
.fromMsg .lable{
  line-height: 50px;
  font-size: 14px;
  display: flex;
  border-bottom: 1px solid #ededed;
}
.fromMsg .lable span{
  display: block;
  float: left;
  width: 75px;
  text-align: left;
  color: #919191;
}
.fromMsg .lable input{
  display: block;
  float: left;
  flex: 1;
  text-indent: 10px;
  outline:medium;
}
.fromBox{
  position: absolute;
  left: 0;
  bottom: 0;
  height: 50px;
  line-height: 50px;
  color: #ffffff;
  background: #ff3b2f;
  width: 100%;
  border-radius: 0 0 20px 20px;
}
</style>
